<template>
  <div>
    <div class="vux-demo">
      <img class="logo" src="../assets/vux_logo.png">
      <h2>奖金计算器</h2>
    </div>
    <group title="">
    <x-input title="用户名" v-model="name" placeholder="请输入计算对象的简称或者代号"  placeholder-align="right"></x-input>   
    <x-input title="最高值" placeholder="请输入前三季度中"  placeholder-align="right" v-model="maxValue"></x-input>
    <x-input title="销售额" v-model="sellValue"  @on-change="change"  placeholder="请输入当前季度销售额" placeholder-align="right"></x-input>
    <x-input title="增长额" v-model="addValue" readonly  placeholder="自动计算当前季度增长额" placeholder-align="right"></x-input>
    <x-input title="增长率" v-model="addp"  readonly  placeholder="自动计算增长率" placeholder-align="right"></x-input>
    
    </group>
    <x-button type="primary" @click.native="getScore" >确认</x-button>
    <divider>计算结果</divider>
 
      <group>      
        <cell  title="销售员" :value="name"></cell>
        <cell  title="贡献奖" :value="gxj"></cell>
        <cell title="增长奖"  :value="zzj"></cell>
        <cell title="合计" :value="gxj+zzj"></cell>
      </group>
       <divider> 鄂西团队专用</divider>
  </div>
</template>

<script>
import {CellFormPreview, Group, Cell, Alert, XInput, Card, Divider, XButton} from 'vux'

export default {
  components: {
    CellFormPreview,
    Group,
    Cell,
    Alert,
    XInput,
    Card,
    Divider,
    XButton
  },
  data () {
    return {
      name: '',
      sumValue: '',
      gxj: '',
      zzj: '',
      maxValue: '',
      addValue: '',
      addp: '',
      sellValue: ''
    }
  },
  methods: {
    /* 一、贡献奖 gxj
    1.销售额<150000，增长额<30000，奖金0
    2.销售额<150000，增长额>30000，奖金=5000
    3.销售额>150000，增长额没有限制，奖金=销售额×4％×（1+增长率）
    二、增长奖 zzj
    1.增长额<50000，增长奖=增长额×20％
    2.增长额>50000，增长额=增长额×40％ */
    change (val) {
      this.addp = (this.sellValue - this.maxValue) / this.maxValue
      this.addValue = this.sellValue - this.maxValue
      if (this.addp < 0) {
        this.addp = 0
      }
      if (this.addValue < 0) {
        this.addValue = 0
      }
    },
    getScore: function getScore () {
      if (this.sellValue < 150000 && this.addValue < 30000) {
        this.gxj = 0
      } else if (this.sellValue < 150000 && this.addValue > 30000) {
        this.gxj = 5000
      } else if (this.sellValue >= 150000) {
        this.gxj = this.sellValue * 0.04 * (1 + this.addp)
      }

      if (this.addValue < 50000 && this.addValue > 0) {
        this.zzj = this.addValue * 0.2
      } else {
        this.zzj = this.addValue * 0.4
      }
    }
  }
}
</script>

<style>

.vux-demo {
  text-align: center;
}
.logo {
  width: 100px;
  height: 100px
}
</style>
